<template>
  <html>
  <el-container>
    <el-main id="outbox">
      <el-container id="box">
        <el-aside id="left" width="40%">

        </el-aside>
        <el-container>
          <el-main class="main_tab" id="main">
            <h4>找回密码</h4>
            <!--第一个表格（手机，邮箱切换验证）-->
            <el-form class="form" v-bind:style="{display:form_1}">
              <el-form-item>
                <input class="acc" type="text" v-bind:placeholder="typeString" v-model="form.userPass"></input>
                <el-button class="butt" @click="change" round size="medium">切换验证方式</el-button>
              </el-form-item>
              <el-form-item>
                <input class="acc" type="text" placeholder="验证码" v-model="form.code"></input>
                <el-button  class="butt" @click="getCode" round size="medium">
                  <span v-show="show">&nbsp获取验证码&nbsp</span>
                  <span v-show="!show" class="count">{{count}} s</span>
                </el-button>
              </el-form-item>
            </el-form>

            <form class="form" v-bind:style="{display:form_2}">
              <div class="input">
              <el-input type="password" placeholder="请输入密码" v-model="form.password"show-password></el-input>
              <el-input type="password" placeholder="再次输入密码" v-model="cPassWord"show-password></el-input>
              </div>
            </form>

          </el-main>
          <el-footer id="foot" height="190px">
            <el-button style="margin-top: 12px;" class="submit" autofocus=true @click="clickBtn">
              验证
            </el-button>
            <el-steps :active="active" finish-status="success" align-center=true>
              <el-step title="电话/邮箱验证"></el-step>
              <el-step title="修改密码"></el-step>
            </el-steps>

            <router-link class="return" to="/">返回登录页面</router-link>

          </el-footer>
        </el-container>
      </el-container>
    </el-main>
  </el-container>
  </html>
</template>

<script>
import {post} from "../common/serviceUtil";
export default {
  name: "RetrievePw",
  data(){
    return{
      ok:false,
      status:1,
      active:0,
      typeString:"电话",
      form_1:"",
      form_2:"none",
      cPassWord:"none",
      /*倒计时*/
      show: true,
      count: "", // 初始化次数
      timer: null,
      /*倒计时结束*/
      form:{
        kind:true,
        code:"",
        userPass:"",
        password:""
      }
    }
  },methods:{

    tranform(){
      if (this.active++ > 2){
        this.active = 0;
      }
      if(this.active===0){
        this.form_1 = "";
        this.form_2 = "none";
      }else if(this.active===1){
        this.form_1 = "none";
        this.form_2 = "";
      }else if(this.active===2){
        this.form_1 = "none";
        this.form_2 = "none";
      }
    },



    change(){
      if(this.form.kind){
        this.form.kind = false
        this.typeString = "邮箱" ;
      }else{
        this.form.kind = true
        this.typeString = "电话" ;
      }
    },

    getCode() {
      post("getCode",this.form).then(function (res){
        if(res.data.data==1){
          alert("发送成功");
          const TIME_COUNT = 60; //更改倒计时时间
          if (!this.timer){
            this.count = TIME_COUNT;
            this.show = false;
            this.timer = setInterval(() =>{
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--;
              } else {
                this.show = true;
                clearInterval(this.timer); // 清除定时器
                this.timer = null;
              }
            },1000);
          }
          /**/
        }
      })
    },

    checkCode(){
      let vue = this ;
      post("checkCode",this.form).then(function (res){
        if(res.data.data===1){
          vue.tranform()
          vue.status = 2
          alert("跳转到登陆界面")
          vue.$router.push({path:"/ind"})
        }
      })
    },

    checkPassWord() {
      if(this.form.password===this.cPassWord){
        this.ok = true ;
      }else{
        this.ok = false ;
      }
    },

    subMit(){
      let vue = this ;
      post("forGetPwd",this.form).then(function (res) {
        if(res.data.data===1){
          vue.tranform()
        }
      })
    },

    clickBtn(){
      if(this.status===1){
        this.checkCode()
      }else if(this.status===2){
        this.subMit()
      }
    }
  }
}
</script>

<style scoped>
html{
  /*background-image: url("/static/img/forbidden_city.jpg");*/

}


#outbox{
  margin-top: 10%;

  height: 660px;
  min-width: 70rem;
}
#box{
  background-color: rgba(255, 255, 255, 0.7);
  width:50%;
  margin-left:auto;
  margin-right: auto;
  min-width: 60rem;
  max-width: 68rem;
  height:100%;
  border-radius: 1.5rem;
}
#left{
  width: 38%;
  background-image: url("/static/img/3.jpg");
  border-radius: 1.5rem 0 0 1.5rem;
}
.main_tab h4{
  font-size: 1.8rem;
  color: rgb(238, 38, 99);
}

.input>>>.el-input{
  width: 60%;
  font-size: 1.2rem;
  margin-top: 2.5rem;
  margin-left: 1rem;
  padding: 1rem 0 0 1.6rem;
  border: 0;

  /*border-bottom: 1px solid rgb(28, 16, 17);*/
}
.input>>>.el-input__inner{
  border: 0;
  border-bottom: 1px solid rgb(28, 16, 17);
  border-radius: 0;
  color: black;
  background-color: rgba(0, 0, 0, 0);
}

/*表单内字体设置*/

.form .acc{
  outline: none;
  width: 60%;
  height: 3rem;
  font-size: 1rem;
  margin-top: 2rem;
  margin-left: 1rem;
  padding: 1rem 0 0 1.6rem;
  border: none;
  border-bottom: 1px solid rgb(5, 4, 9);
  color: rgb(11, 10, 17);
  background-color: rgba(0, 0, 0, 0);
}

/*提交按钮样式*/
.submit{
  width: 50%;
  height: 3rem;
  color: #f6f6f6;
  background-image: linear-gradient(120deg, #fa384a 0%, #f8f01e 100%);
  font-size: 1.2rem;
  border: none;
  border-radius: 1rem;
  margin: 3rem 0 0 50%;
  transform: translateX(-50%);
  margin-bottom: 1rem;
}
.submit:hover {
  box-shadow: 0 0 2rem -0.5rem rgb(0 0 0/15%);
}

/*底部返回按钮*/
.return{
  font-size: 1.3rem;
  text-decoration: none;
  padding: 1rem 2rem;
  color: #666;
}
.return:hover{
  color: rgb(201, 183, 81);
}
</style>
